<html>

<head>
<title>Spin Button demo</title>
<style type="text/css">

div.xf_spinbutton_frame {
	display: inline;
	padding-right: 12px;
	position: relative;
}

div.xf_spinbutton_frame input.xf_spinbutton_value {
	text-align: right;
}

div.xf_spinbutton_frame input.xf_spinbutton_up,
div.xf_spinbutton_frame input.xf_spinbutton_down {
	font-size: 4px;
	margin: 0;
	padding: 0;
	position: absolute;
	width: 12px;
}

div.xf_spinbutton_frame input[type="button"]	{
	right: 0;
}

div.xf_spinbutton_frame input.xf_spinbutton_up {
	margin-bottom: 10px;
}

div.xf_spinbutton_frame input.xf_spinbutton_down {
	margin-top: 11px !important;
	margin-top: 12px;
}

</style>
<script type="text/javascript" src="../js/Date.js"></script>
<script type="text/javascript" src="../js/web/XHTMLDOM.js"></script>
<script type="text/javascript">

window.onload = function()
{
	var D, M, Y;
	var D_sb, Y_sb;

	var now = new Date();

	// Date
	D = document.getElementById('D');
	D_sb = new XHTMLDOM.utils.Spinbutton(D, {
		value: now.getDate(),
		min: 1,
		max: now.getDaysInMonth(),
		rotate: 1
	});

	// Month
	M = document.getElementById('M');
        M.selectedIndex = now.getMonth();
	M.onchange = function()
	{
		var here = new Date(Y.value, M.options.selectedIndex, 1);
		if ( ! here ) {
			return;
		}

		D_sb.updateOptions({
			max: here.getDaysInMonth()
		});
	};

	// Year
	Y = document.getElementById('Y');
	Y_sb = new XHTMLDOM.utils.Spinbutton(Y, {
		value: now.getFullYear(),
		min: now.getFullYear() - 50,
		max: now.getFullYear() + 50,
		rotate: 1,
		behavior: M.onchange // The same handler
	});

	// Hours
	XHTMLDOM.utils.Spinbutton(document.getElementById('hh'), {
		value: now.getHours(),
		min: 0, 
		max: 23, 
		rotate: 1
	});

	// Minutes
	XHTMLDOM.utils.Spinbutton(document.getElementById('mm'), {
		value: now.getMinutes(),
		min: 0, 
		max: 59, 
		rotate: 1
	});

	// Seconds
	XHTMLDOM.utils.Spinbutton(document.getElementById('ss'), {
		value: now.getSeconds(),
		min: 0, 
		max: 59, 
		rotate: 1
	});
}

</script>
</head>

<body>

<div>
<input type="text" id="D" />

<select id="M" style="width: 158px">
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>

<input type="text" id="Y" />
</div>

<div>
<input type="text" id="hh" />
<input type="text" id="mm" />
<input type="text" id="ss" />
</div>

</body>
</html>
